.thaw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    box-sizing: border-box;
    vertical-align: middle;

    padding: 5px var(--spacingHorizontalM);

    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);

    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);

    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    text-decoration-line: none;
    overflow: hidden;

    transition-duration: var(--durationFaster);
    transition-property: background, border, color;
    transition-timing-function: var(--curveEasyEase);
}

.thaw-button:hover {
    background-color: var(--colorNeutralBackground1Hover);
    color: var(--colorNeutralForeground1Hover);
    border-color: var(--colorNeutralStroke1Hover);
    cursor: pointer;
}

.thaw-button:hover:active {
    background-color: var(--colorNeutralBackground1Pressed);
    color: var(--colorNeutralForeground1Pressed);
    border-color: var(--colorNeutralStroke1Pressed);
}

.thaw-button--primary {
    background-color: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    border-color: transparent;
}

.thaw-button--primary:hover {
    background-color: var(--colorBrandBackgroundHover);
    color: var(--colorNeutralForegroundOnBrand);
    border-color: transparent;
}

.thaw-button--primary:hover:active {
    background-color: var(--colorBrandBackgroundPressed);
    color: var(--colorNeutralForegroundOnBrand);
    border-color: transparent;
}

.thaw-button--subtle {
    background-color: var(--colorSubtleBackground);
    color: var(--colorNeutralForeground2);
    border-color: transparent;
}

.thaw-button--subtle:hover {
    background-color: var(--colorSubtleBackgroundHover);
    color: var(--colorNeutralForeground2Hover);
    border-color: transparent;
}

.thaw-button--subtle:hover:active {
    background-color: var(--colorSubtleBackgroundPressed);
    color: var(--colorNeutralForeground2Pressed);
    border-color: transparent;
}

.thaw-button--transparent {
    background-color: var(--colorTransparentBackground);
    color: var(--colorNeutralForeground2);
    border-color: transparent;
}

.thaw-button--transparent:hover {
    background-color: var(--colorTransparentBackgroundHover);
    color: var(--colorNeutralForeground2BrandHover);
    border-color: transparent;
}

.thaw-button--transparent:hover:active {
    background-color: var(--colorTransparentBackgroundPressed);
    color: var(--colorNeutralForeground2BrandPressed);
    border-color: transparent;
}

.thaw-button--circular {
    border-radius: var(--borderRadiusCircular);
}
.thaw-button--square {
    border-radius: var(--borderRadiusNone);
}

.thaw-button--small {
    min-width: 64px;

    padding: 3px var(--spacingHorizontalS);

    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    font-weight: var(--fontWeightRegular);
}

.thaw-button--small.thaw-button--loading,
.thaw-button--small.thaw-button--icon {
    padding: 1px var(--spacingHorizontalS);
}

.thaw-button--large {
    min-width: 96px;

    padding: 8px var(--spacingHorizontalL);

    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
}

.thaw-button--large.thaw-button--loading,
.thaw-button--large.thaw-button--icon {
    padding: 7px var(--spacingHorizontalL);
}

.thaw-button--only-icon {
    max-width: 32px;
    min-width: 32px;
    padding: 5px;
}

.thaw-button:not(.thaw-button--only-icon) .thaw-button__icon {
    margin-inline-end: var(--spacingHorizontalSNudge);
}

.thaw-icon.thaw-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.thaw-button--small.thaw-button--only-icon {
    max-width: 24px;
    min-width: 24px;
    padding: 1px;
}

.thaw-button--large.thaw-button--only-icon {
    max-width: 40px;
    min-width: 40px;
    padding: 7px;
}
.thaw-button--large .thaw-button__icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.thaw-button--loading:hover {
    cursor: wait;
}

.thaw-button--disabled:hover:active,
.thaw-button--disabled:hover,
.thaw-button--disabled {
    color: var(--colorNeutralForegroundDisabled);
    background-color: var(--colorNeutralBackgroundDisabled);
    border-color: var(--colorNeutralStrokeDisabled);
    cursor: not-allowed;
}

.thaw-button--primary.thaw-button--disabled:hover:active,
.thaw-button--primary.thaw-button--disabled:hover,
.thaw-button--primary.thaw-button--disabled {
    border-color: transparent;
}

.thaw-button--subtle.thaw-button--disabled:hover:active,
.thaw-button--subtle.thaw-button--disabled:hover,
.thaw-button--subtle.thaw-button--disabled,
.thaw-button--transparent.thaw-button--disabled:hover:active,
.thaw-button--transparent.thaw-button--disabled:hover,
.thaw-button--transparent.thaw-button--disabled {
    background-color: transparent;
    border-color: transparent;
}

.thaw-button--block {
    display: flex;
    width: 100%;
}
